Añadir bullets a nuestras listas

Los editores incluido Blogger nos ofrecen la posibilidad de crear listas en nuestras entradas.

Cuando hacemos uso de esa opción nos añade un punto a la izquierda y nuestro listado se ve así:

A ese pequeño punto negro se le conoce por bullet, si una vez realizado el listado con el editor de Blogger hacemos click en la pestaña de Edición de HTML nos encontraríamos con algo así:

<ul> <li>Amarillo</li> </ul> <ul> <li>Verde</li> </ul> <ul> <li>Naranja</li> </ul> <ul> <li>Azul</li> </ul> <ul> <li>Rojo</li> </ul>

En realidad de todo ese código para crear una lista nos bastaría con este:

<ul> <li>Amarillo</li> <li>Verde</li> <li>Naranja</li> <li>Azul</li> <li>Rojo</li> </ul>

El resultado sería el mismo:

Amarillo Verde Naranja Azul Rojo

También podemos anidar listas, incluir una dentro de otra, y lo hacemos añadiendo la etiqueta <ol> al principio y </ol> al final de la lista.

Colores Amarillo Verde Números Uno Dos

<ol> <li>Colores <ul> <li>Amarillo</li> <li>Verde</li> </ul> </li> <li>Números <ul> <li>Uno</li> <li>Dos</li> </ul> </li> </ol>

Que nuestro listado fueran enlaces no sería problema.

Amarillo Verde Naranja Azul Rojo

<ul> <li><a href="url-página">Amarillo</a></li> <li><a href="url-página">Verde</a></li> <li><a href="url-página">Naranja</a></li> <li><a href="url-página">Azul</a></li> <li><a href="url-página">Rojot</a></li> </ul>

Sin embargo para añadir un listado con bullet en la sidebar podemos hacer uso de CSS y al mismo tiempo añadirle unos estilos.

Si miramos nuestra plantilla en /* Sidebar Content llegaremos a encontrar:

.sidebar ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
.sidebar li {
margin:0;
padding-top:0;
padding-$endSide:0;
padding-bottom:.25em;
padding-$startSide:15px;
text-indent:-15px;
line-height:1.5em;
}

Esa es la parte de los estilos de nuestras listas, podemos personalizarlo de acuerdo a nuestro gusto y necesidad.


Si añadimos una imagen con background-image: url(url-imagen); estamos añadiendo un bullet.

Pero saldría horroroso habría que hacer algo para que no se repita la imagen y de paso ubicarla a la izquierda.
background-repeat: no-repeat;
background-position: 0 .2em;
padding-left: 1.2em;

Sería algo así:
.sidebar ul {
list-style-type: none;
padding: 0;
margin:0;
}
.sidebar li {
background-image: url(url-imagen);
background-repeat: no-repeat;
background-position: 0 .2em;
padding-left: 1.2em;
}

Con padding-left y background-position asignamos la ubicación del bullet, podemos aumentar o disminuir y mirando en vista previa veremos el resultado.

Los bullets deben tener ser de tamaño pequeño, si la altura fuera mayor a la del texto no sólo no quedaría estéticamente bien sino que sería imposible situarlos junto al texto.
Podéis ver un bonito surtido de bullets en WEBSITEBULLETS una página proporcionada por Blog and Web